<template>
    <div>
        <el-dialog :visible.sync="open" title="监控播放器" width="960px" destory-on-close>
            <div class="camera-view" ref="cameraView" v-if="title != ''">
                <iframe :src="url" frameborder="0" width="100%" height="100%"></iframe>
            </div>

            <div slot="footer">
                <el-button @click="close">关闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import dialogMixin from "@/mixins/dialogMixin";
export default {
    name: "CameraView",
    mixins: [dialogMixin],
    data() {
        return {
            playerUrl: "/common/player",
            cameraViewX: 0,
            cameraViewY: 0,
            title: "",
            deviceCode: "",
        };
    },
    computed: {
        url() {
            return `${this.playerUrl}?title=${this.title}&x=${this.cameraViewX}&y=${this.cameraViewY}&deviceCode=${this.deviceCode}`;
        },
    },
    mounted() {},
    methods: {
        show(title, deviceCode) {
            this.deviceCode = deviceCode;
            this.title = title;
            this.open = true;
            this.$nextTick(() => {
                // 弹窗的宽度是960px，根据页面宽度含滚动条，计算弹窗的x坐标
                this.cameraViewX = document.documentElement.clientWidth * 0.5 - 450;
                // 弹窗距离顶部6vh，根据页面高度换算成px
                this.cameraViewY = document.documentElement.clientHeight * 0.06 + 84;
            });
        },
    },
};
</script>
<style lang="scss" scoped>
.camera-view {
    width: 100%;
    height: 518px;
}
</style>
